<script lang='ts' setup>
import { computed } from 'vue';
import ConfirmBase from './ConfirmBase.vue';
import { useRoute } from 'vue-router';
import type { SelectProps } from 'ant-design-vue';
import { ref } from 'vue';

const route = useRoute()

const title = computed(() => {
    return route.query.title || '' as string;
})

const options = ref<SelectProps['options']>([
    { value: 'a', label: '月卡' },
    { value: 'b', label: '季卡' },
    { value: 'c', label: '半年卡' },
    { value: 'd', label: '年卡' },
]);
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const handleBlur = () => {
    console.log('blur');
};
const handleFocus = () => {
    console.log('focus');
};
const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const value = ref<string | undefined>(undefined);
</script>
<template>
    <ConfirmBase :title="title">
        <el-form-item label="办卡类型">
            <a-select v-model:value="value" show-search placeholder="选择办卡类型" style="width: 200px" :options="options"
                :filter-option="filterOption" @focus="handleFocus" @blur="handleBlur" @change="handleChange"></a-select>
        </el-form-item>
    </ConfirmBase>
</template>
<style lang='scss' scoped></style>